<template>


  <div class="box">
    <div class="top">
       <div class="center">


                          <ModelTitle>
                          <template>
                            轮播图管理
                          </template>
                        </ModelTitle>
  
  
                          <!-- 时间搜索框 -->
                          <div class="zhanwei11">
                            <p class="riqi">发布日期</p>
                            <div id="u8588_div1">
                              <div class="block">
                                <el-date-picker
                                  v-model="value2"
                                  type="daterange"
                                  align="left"
                                  unlink-panels
                                  range-separator="-"
                                  start-placeholder="开始日期"
                                  end-placeholder="结束日期"
                                  :picker-options="pickerOptions">
                                </el-date-picker>
                              </div>  
                            </div>
  
                            <!-- 搜索框 -->
                            <el-input style="width:378px;margin-left: 400px;margin-top: 1px;"
                              placeholder="请输入内容"
                              v-model="input"
                              clearable suffix-icon="ddg">
                            </el-input>
                            
                             <!-- 搜索按钮 -->
                            <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>


                            <!-- 新增按钮 -->
                            <div id="u8777_div">
                              <el-button type="primary"    @click="dialogFormVisible = true">发布文章</el-button>
                            </div>
  

                  <!-- 表格 -->
                <div>    
                <el-table 
                  :data="list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                  border:none
                  stripe
                  style="width:1110px;margin-top:20px;margin-left:20px">

                    <el-table-column
                      prop="id"
                      label="序号"
                      align="center">
                    </el-table-column>

                    <el-table-column
                      prop="img"
                      label="图片"
                      width="180"
                      align="center">
                    </el-table-column>
                    <!-- <template slot-scope="scope">
                      
                    </template> -->
                    <el-table-column
                      prop="imgname"
                      label="Banner图片名"
                      align="center">
                    </el-table-column>

                    <el-table-column
                      prop="people"
                      label="发布人"
                      align="center">
                    </el-table-column>

                    <el-table-column
                      prop="fadata"
                      label="发布时间"
                      align="center">
                    </el-table-column>

                    <el-table-column
                      prop="state"
                      label="状态"
                      align="center">

                      <template slot-scope="scope">
                      <el-switch
                        v-model="scope.row.state"
                        class="switch"
                        active-text="开 "
                        inactive-text="关 "

                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        
                        :active-value="1"
                        :inactive-value="0"
                        @change="chenge(scope.row)"
                      />
                    </template>

                    </el-table-column>

                    <el-table-column
                      prop="caodata"
                      label="操作时间"
                      align="center">
                    </el-table-column>

                    <el-table-column
                      label="操作"
                      width="180"
                      align="center">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                          size="mini"
                          type="danger"
                          @click="handleClickeditdel(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                </el-table> 
              </div>

                <div  style="width:530px;height:50px;margin-left: 300px;float: left;margin-top: 40px;">
                  <el-pagination
                          align="center"
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="currentPage"
                          :page-sizes="[5, 10, 15, 20]"
                          :page-size="pageSize"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="list.length"
                        >
                        </el-pagination>
                    </div>
                    
                    </div>
  
                    <!-- 新增弹框 -->
                    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                      <el-form-item label="活动名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="活动区域" :label-width="formLabelWidth">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                          <el-option label="区域一" value="shanghai"></el-option>
                          <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogFormVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                    </div>
                  </el-dialog>


  

      </div>
    </div>
  </div>
  
  </template>
  
  <script>
  import ModelTitle from '@/components/ModelTitle.vue'
  import axios from 'axios'
  axios.defaults.baseURL="http://localhost:8080"




  export default {


    methods: {
      henge(row) {
      if (row.state === 0) {
        row.disabled = true
      } else {
        row.disabled = false
      }
    },


      handleEdit(index, row) {
        console.log(index, row);
      },


      //删除
      handleClickeditdel(row) {
      axios({
                url: "/user/lunbotuDelect",
                method: "POST",
                params:{
                id:row.id
                }
            }).then((res) => {
                // this.list = res.data; //把值传到list里面
                // console.log(this.list);
                
                this.$message.success('删除成功')
                this.query();
            })
    },


      onSubmit(){
          alert(this.input),
              axios({
                url:'/user/getListuser',
                method:'GET',
                params:{
                  
                }
                    }).then((res) => {
                      this.list=res.data      //把值传到list里面
                      console.log(res.data);
                    })
      },
             //每页条数改变时触发 选择一页显示多少行
             handleSizeChange(val) {
                //   alert(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
              },
              //当前页改变时触发 跳转其他页
              handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
              },


              //咨询查询
            query(){
              axios({
                url:'/user/getListImg',
                method:'GET',
                    }).then((res) => {
                      this.list=res.data      //把值传到list里面
                      console.log(res.data);
                    })
                },

        },




      data() {
        return {
          value: false,//状态按钮
          dialogFormVisible: false,//新增表格弹框
          formLabelWidth: '120px',//新增表格弹框

          form: {//新增表格from表单
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },

          //数据库数据
          list:[],//存放签约状态下拉

          currentPage: 1, // 当前页码
          pageSize: 5, // 每页的数据条数


          input: '',
          pickerOptions: {
          },
          value1: '',
          value2: ''
        };
        
      },

      //查询
      created () {
            this.query()
        },

        components: { ModelTitle }
    };
  
  
  </script>
  
  <style>
          *{
              margin: 0;
              padding: 0;
          }
          body{ 
              background: #F2F7FA;
          }
          .box{
              width: 1150px;
              height: 1112px;
              margin: 20px auto;
              background: white;
              position: relative;
          }
  
          .zhanwei11{
              width: 1150px;
              height: 40px;
  
              float: left;
              margin-top: 50px;
              
          }
  
          #u8588_div1 {
              color: lightgray;
              border-width: 0px;
              position: absolute;
              margin-left: 90px;
              width: 360px;
              height: 40px;
              border-width: 1px;
              border-style: solid;
              border-color: rgba(228, 228, 228, 1);
              border-radius: 4px;
              border:none;
          }
  
          .riqi{
              color: lightgray;
              float: left;
              line-height: 40px;
              margin-left: 20px;
          }
  
          #u8777_div{
              width: 112px;
              height: 40px;
              float: right;
              margin-right: 20px;
              border-radius: 8px;
          }

  </style>
  